<template>
	<view class="page">
		<view class="header">
			<yzh-header :title="'已完成订单'" :bgColor="'#C3D0E1'"></yzh-header>
			<!-- #ifdef MP-WEIXIN -->
			<image src="@/static/yzh/yhj.jpg"></image>
			<!-- #endif -->
		</view>
		<view class="body">
			<uni-card title="订单信息" :extra="orderInfo.status==1?'已完成':'未完成'">
				<template v-slot:title>
					<view class="cardTitle">
						<text>订单信息</text>
						<text>{{orderInfo.status==1?'已完成':'未完成'}}</text>
					</view>
				</template>
				<view class="orderInfo">
					<view>
						<text>订单号：</text>
						<text>{{orderInfo.id}}</text>
					</view>
					<view>
						<text>服务项目：</text>
						<text>{{orderInfo.project}}</text>
					</view>
					<view>
						<text>服务门店：</text>
						<text>{{orderInfo.shop}}</text>
					</view>
					<view>
						<text>下单时间：</text>
						<text>{{orderInfo.orderTime}}</text>
					</view>
					<view>
						<text>预约时间：</text>
						<text>{{orderInfo.appointmentTime}}</text>
					</view>
					<view>
						<text>车辆：</text>
						<text>{{orderInfo.car}}</text>
					</view>
					<view>
						<text>备注：</text>
						<text>{{orderInfo.note}}</text>
					</view>
				</view>
				<view class="orderDetail">
					<view class="project">
						<view v-for="(item,index) in orderInfo.projectList" key="index">
							<text>{{item.name}}</text>
							<text>¥{{item.price}}</text>
						</view>
					</view>
					<view class="price">
						<view>
							<text>原价：</text>
							<text>¥{{orderInfo.orgPrice}}</text>
						</view>
						<view>
							<text>店家优惠：</text>
							<text>-¥{{orderInfo.shopAccount}}</text>
						</view>
						<view>
							<text>优惠券：</text>
							<text>-¥{{orderInfo.userAccount}}</text>
						</view>
						<view>
							<text>支付金额：</text>
							<text>¥{{orderInfo.realPrice}}</text>
						</view>
					</view>

				</view>
			</uni-card>
		</view>
		<view class="bottom">
			<uni-card title="评价结果" extra="	">
				<view class="comment" v-if="orderInfo.status==1">
					<view>
						<text>评价时间：</text>
						<text>{{orderInfo.comment.time}}</text>
					</view>
					<view>
						<text>评价结果：</text>
						<view>
							<uni-rate :readonly="true" :value="orderInfo.comment.score" size="14" max="3" />
						</view>
					</view>
					<view>
						<text>评语：</text>
						<text>{{orderInfo.comment.content}}</text>
					</view>
				</view>
				<view v-if="orderInfo.status==0">
					<view>订单未完成，无法评价</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import Header from "@/components/Header/Header.vue";
	export default {
		components: {
			'yzh-header': Header
		},
		data() {
			return {
				orderInfo: {
					id: 1002,
					project: "车辆保养",
					shop: "门店",
					orderTime: "2023-03-08 17:40",
					appointmentTime: "2023-03-09 17:40",
					car: "奔驰FWE4/豫A98FHJ",
					note: "备注备注备注",
					projectList: [{
						name: "车辆清洗",
						price: 39.9
					}, {
						name: "车辆附加费用",
						price: 39.9
					}],
					orgPrice: 39.9,
					shopAccount: 39.9,
					userAccount: 39.9,
					realPrice: 39.9,
					status: 1,
					comment: {
						time: "2023-03-08 17:40",
						score: 2,
						content: "不错洗车洗的很干净"
					}
				}
			}
		},
		methods: {

		},
		onLoad(option) {
			// console.log(option.id)
		}
	}
</script>

<style scoped>
	.page {
		/* #ifndef MP-WEIXIN */
		background-image: url('@/static/yzh/yhj.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 110vh;
		/* #endif */
	}

	.header {}

	.header>image {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
	}

	.body {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 90%;
		margin: 0 auto;
		margin-top: 100rpx;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 90%;
		margin: 0 auto;
		margin-top: -40rpx;
	}

	.cardTitle {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		border-bottom: 2rpx solid #DCDCDC;
		padding-bottom: 20rpx;
	}

	.orderInfo>view {
		margin-top: 20rpx;
		color: black;
	}

	.project>view,
	.price>view {
		display: flex;
		justify-content: space-between;
		color: black;
		margin-top: 20rpx;
	}

	.price>view:nth-child(2)>text:nth-child(2),
	.price>view:nth-child(3)>text:nth-child(2) {
		color: red;
	}

	.comment>view {
		color: black;
		margin-top: 20rpx;
	}

	.comment>view:nth-child(2) {
		display: flex;
		align-items: center;
	}
</style>